<template>
<div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
     <!-- 训练+测试  -->
    <el-tab-pane label="训练+测试" name="first">
      <div>
       <p> 训练+测试</p>
        <!-- 选择模型 -->
          <div class="select">
            <span>&nbsp;&nbsp;&nbsp;选择模型&nbsp;&nbsp;&nbsp;</span>
            <el-select v-model="model_v" placeholder="请选择">
              <el-option
                v-for="item in model"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <!-- 选择训练数据集 -->
          <div class="select">
            <span>&nbsp;&nbsp;&nbsp;选择训练数据集&nbsp;&nbsp;&nbsp;</span>
            <el-select v-model="trainingdata_v" placeholder="请选择">
              <el-option
                v-for="item in trainingdata"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <!-- 自定义参数 -->
          <div>
            <span>&nbsp;&nbsp;&nbsp;自定义参数&nbsp;&nbsp;&nbsp;</span>
            <el-button type="success" plain><i class="el-icon-circle-plus-outline"></i>增加参数</el-button>
          </div>
        <div class="select">
        <span>&nbsp;&nbsp;&nbsp;选择训练好的任务&nbsp;&nbsp;&nbsp;</span>
        <el-select v-model="trained_v" placeholder="请选择">
          <el-option
            v-for="item in trained"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- 选择测试集 -->
      <div class="select">
        <span>&nbsp;&nbsp;&nbsp;选择测试集&nbsp;&nbsp;&nbsp;</span>
        <el-select v-model="testdata_v" placeholder="请选择">
          <el-option
            v-for="item in testdata"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- 自定义参数 -->
      <div>
        <span>&nbsp;&nbsp;&nbsp;自定义参数&nbsp;&nbsp;&nbsp;</span>
        <el-button type="success" plain><i class="el-icon-circle-plus-outline"></i>增加参数</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" plain>启动</el-button>
      </div>
      </div>
    </el-tab-pane>








    <!-- 测试+报表 -->
    <el-tab-pane label="测试+报表" name="second">
      <div>
      <p> 测试+报表</p>
       <!-- 选择测试好的任务 -->
      <div class="select">
        <span>&nbsp;&nbsp;&nbsp;选择训练好的任务&nbsp;&nbsp;&nbsp;</span>
        <el-select v-model="trained_v" placeholder="请选择">
          <el-option
            v-for="item in trained"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- 选择测试集 -->
      <div class="select">
        <span>&nbsp;&nbsp;&nbsp;选择测试集&nbsp;&nbsp;&nbsp;</span>
        <el-select v-model="testdata_v" placeholder="请选择">
          <el-option
            v-for="item in testdata"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- 自定义参数 -->
      <div>
        <span>&nbsp;&nbsp;&nbsp;自定义参数&nbsp;&nbsp;&nbsp;</span>
        <el-button type="success" plain><i class="el-icon-circle-plus-outline"></i>增加参数</el-button>
      </div>
      <div class="top20">
      <span class="right20">选择已测试任务</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="top20">
      <span class="right20">选择基准测试任务</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="btn">
        <el-button type="primary" plain>启动</el-button>
      </div>
       </div>
      </el-tab-pane>






    <!-- 训练+测试+报表 -->
    <el-tab-pane label="训练+测试+报表" name="third">
      <div>
       <p> 训练+测试+报表</p>
       <div class="select">
            <span>&nbsp;&nbsp;&nbsp;选择模型&nbsp;&nbsp;&nbsp;</span>
            <el-select v-model="model_v" placeholder="请选择">
              <el-option
                v-for="item in model"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <!-- 选择训练数据集 -->
          <div class="select">
            <span>&nbsp;&nbsp;&nbsp;选择训练数据集&nbsp;&nbsp;&nbsp;</span>
            <el-select v-model="trainingdata_v" placeholder="请选择">
              <el-option
                v-for="item in trainingdata"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <!-- 自定义参数 -->
          <div>
            <span>&nbsp;&nbsp;&nbsp;自定义参数&nbsp;&nbsp;&nbsp;</span>
            <el-button type="success" plain><i class="el-icon-circle-plus-outline"></i>增加参数</el-button>
          </div>


            <!-- 选择测试集 -->
            <div class="select">
              <span>&nbsp;&nbsp;&nbsp;选择测试集&nbsp;&nbsp;&nbsp;</span>
              <el-select v-model="testdata_v" placeholder="请选择">
                <el-option
                  v-for="item in testdata"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>

            <!-- 自定义参数 -->
            <div>
              <span>&nbsp;&nbsp;&nbsp;自定义参数&nbsp;&nbsp;&nbsp;</span>
              <el-button type="success" plain><i class="el-icon-circle-plus-outline"></i>增加参数</el-button>
            </div>

          <div class="top20 select">
            <span class="right20">选择基准测试任务</span>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="btn">
        <el-button type="primary" plain>启动</el-button>
          </div>
            </div>
            </el-tab-pane>
        </el-tabs>
</div>
</template>
<script>
export default {
  data () {
    return {
      activeName: 'second',
      model: [{
        value: '1',
        label: '黄金糕'
      }, {
        value: '2',
        label: '双皮奶'
      }, {
        value: '3',
        label: '蚵仔煎'
      }, {
        value: '4',
        label: '龙须面'
      }, {
        value: '5',
        label: '北京烤鸭'
      }],
      model_v: '',

      trainingdata: [{
        value: '1',
        label: '外币八部'
      }],
      trainingdata_v: '',
      trained: [{
        value: '1',
        label: '歪歪歪'
      }],
      trained_v: '',

      testdata: [{
        value: '1',
        label: '瓜瓜'
      }],
      testdata_v: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: ''


    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
      
    }
  }
}
</script>
<style scoped>
  .el-tabs{

  }
  .select,.btn{
    margin: 30px 0;
  }
</style>
